//这是入口文件
import Vue from 'vue'

//导入bootstrap字体图标样式
import 'bootstrap/dist/css/bootstrap.css'
//导入mui的样式
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'

//必须写这个，不然导入的没有样式
import 'mint-ui/lib/style.css'
//导入组件
import app from "./App.vue"
//按需导入Mint-UI中的组件
// import {Header, Swipe, SwipeItem, Button,Lazyload} from 'mint-ui'

//全部导入
import MintUI from 'mint-ui'
//导入element ui
import ElementUI from 'element-ui'
//导入elementui的样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

Vue.use(MintUI);

//注册header组件
// Vue.component(Header.name, Header)
// //注册轮播组件
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
// Vue.use(Lazyload);
//1.导入路由的包
import VueRouter from 'vue-router'
//2.手动安装路由模块
Vue.use(VueRouter)
//(1)导入自己的router.js模块
import routerObj from './router.js'
//导入axios
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);
//接下来就可以在中使用了
axios.defaults.baseURL = 'http://www.liulongbin.top:3005/'
//导入vue-resource
// import VueResource from "vue-resource"

// Vue.use(VueResource);
//设置请求的根路径
// Vue.http.options.root = 'http://www.liulongbin.top:3005/'
//全局设置post时候表单数据格式组织形式
// Vue.http.options.emulateJSON = true;
//http://www.liulongbin.top:3005/getshopcarlist
//导入图片预览插件
import VuePreview from 'vue-preview'

Vue.use(VuePreview)

//导入Vuex
import Vuex from 'vuex'
//注册Vuex
Vue.use(Vuex);

//每次一进入 网站，肯定会调用main.js在刚调用的时候，先从本地存储中，把购物车的数据读出来，
//放到store中
var car = JSON.parse(localStorage.getItem('car') || '[]');

//创建一个Vuex实例对象
var store = new Vuex.Store({
    state: {//专门用来存储数据的
        car: car,//将购物车中商品的数据，用一个数组存储起来，在car数组中，存储一些商品的对象，
        //可以暂时将这个商品对象，设计成这个样子
        //{id:  ,count: , price:  ,selected:false商品是否选中，参与结算}
    },
    mutations: {
        addToCar(state, goods) {//加入购物车的方法
            //点击加入购物车，把商品信息，保存到store中的car上
            //分析：
            //1.如果购物车之前就已经有这个对应的商品了，那么，只需要更新数量
            //2.如果没有，则直接把商品数据，push到car上即可

            var flag = false; //假设 在购物车中没有找到对应的商品

            state.car.some(item => {
                if (item.id == goods.id) {
                    item.count += parseInt(goods.count);
                    flag = true;
                    return true;//终止后续的some循环
                }
            })
            //即如果flag仍然为false 表示购物车中没有这个商品，就直接push进去。
            if (!flag) {//代表购物车中有这个商品，flag=false 取反 true 执行
                state.car.push(goods);
            }
            //当更新car之后，把car数组，存储到本地的localStorage中
            localStorage.setItem('car', JSON.stringify(state.car));
            console.log(state.car)
        },
        updateGoodsInfo(state, goods) {
            //这是更新购物车商品数量的函数
            //分析：
            state.car.some(item => {
                if (item.id == goods.id) {
                    item.count = parseInt(goods.count);
                    return true;//终止循环遍历
                }
            });
            //当修改完商品的数据，把最新的购物车的数据，保存到本地的存储中
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        removeFormCar(state, id) {
            //根据id，从store中的购物车中删除对应的那条商品数据
            state.car.some((item, i) => {
                if (item.id == id) {
                    state.car.splice(i,1);//i为当前匹配到的元素的下标
                    return true;
                }
            });
            //当删除完商品的数据，把最新的购物车的数据，保存到本地的存储中
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        updateselected(state,info) {
            //根据id，从store中找到对应的商品信息，修改商品的状态
            state.car.some(item => {
                if (item.id == info.id) {
                    item.selected = info.selected;
                    return true;
                }
            });
            //当修改完商品的状态，把最新的购物车的数据，保存到本地的存储中
            localStorage.setItem('car', JSON.stringify(state.car));
        },

    },
    getters: {
        //使用方法 this.$store.getters.***
        //相当于 计算属性，也相当于 filters
        getAllCount(state) {
            var c = 0;
            state.car.forEach(item => {
                c += item.count;
            });
            return c;
        },
        getShopCarCount(state) {
            var o = {};//先定义一个空对象
            state.car.forEach(item => {
                o[item.id] = item.count;
            });
            return o;
        },
        getGoodsSelected(state) {
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.selected;

            });
            return o;
        },
        getGoodsCountAndAmount(state) {
            var o = {
                count: 0,//勾选商品的数量
                amount: 0,//勾选的商品总价
            };
            state.car.forEach(item => {
                if (item.selected) {
                    o.count += item.count;
                    console.log(typeof (item.id));
                    o.amount += parseInt(item.price) * parseInt(item.count);
                }
            });
            return o;
        }
    }
})
//导入时间插件
import moment from 'moment'
//定义全局的过滤器
Vue.filter('dataFormat', function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
    //如果直接调用，是当前的时间
    // moment();
    //得到给定时间的字符串
    return moment(dataStr).format(pattern);
})


var vm = new Vue({
    el: '#app',
    render: c => c(app),
    //(2)挂载路由对象到vm实例上
    router: routerObj,
    store
    //将vuex 创建的store 挂载到VM实例上，只要挂载到了vm上，
    //任何组件都能使用store来存取数据了。

})
